<template>
    <div class="video-player">
      <video 
        ref="videoPlayer"
        :src="videoSrc" 
        :controls="controls"
        @play="onPlay"
        @pause="onPause"
        @ended="onEnded"
      ></video>
      <!-- 可以添加控制按钮，如播放/暂停、进度条等 -->
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  // 假设视频源是来自组件属性或固定URL
  const props = defineProps({
    videoSrc: {
      type: String,
      required: true
    },
    controls: {
      type: Boolean,
      default: true
    }
  });
  
  const videoPlayer = ref(null);
  const playing = ref(false);
  
  // 播放状态的切换方法
  const togglePlay = () => {
    if (videoPlayer.value.paused) {
      videoPlayer.value.play();
      playing.value = true;
    } else {
      videoPlayer.value.pause();
      playing.value = false;
    }
  };
  
  // 事件处理函数
  const onPlay = () => {
    playing.value = true;
  };
  
  const onPause = () => {
    playing.value = false;
  };
  
  const onEnded = () => {
    playing.value = false;
  };
  
  // 生命周期钩子
  onMounted(() => {
    // 初始化时可以设置一些视频播放器的默认属性
  });
  
  onUnmounted(() => {
    // 组件卸载时，如果有需要，可以释放视频资源等
  });
  </script>
  
  <style scoped>
video{
    width: 100%;
      height: 100%;
      border-radius: 10px;
}
  </style>